<template>
    <li v-for="(item, index) in datas" :key="item.id">
        <input type="checkbox" v-model="item.ischecked">
        <span :class="item.ischecked ? 'text' : ''">{{ item.content }}</span>
        <button @click="del(index)">删除</button>
    </li>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['datas'])
const emit = defineEmits(['delContent'])
// 删除单个商品
const del = (index) => {
    if (props.datas[index].ischecked) {
        if (confirm('确认删除吗')) {
            emit('delContent', index)
        }
    }
}
</script>

<style>
ul li,
#footer {
    display: flex;
    justify-content: space-between;
}

.text {
    color: #ccc;
    text-decoration: line-through;
}
</style>